<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在网页中插入HTML</title>
    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

</head>
<body>

<!--<div id="app" v-html="htmlText[0]"></div>-->
<div id="app">
    <thanks gift="Batman" decoration="strong"></thanks>
</div>

<script>
    //    new Vue({
    //        el: '#app',
    //        data: {
    //            htmlText:[
    //                'Dear John,<br/>thank you for the <pre>Batman vs Superman</pre> DVD!',
    //                'Dear John,<br/>thank you for <i>Ghostbusters 3</i>!',
    //                'Dear John,<br/>thanks, <b>Gods of Egypt</b> is my new favourite!'
    //            ]
    //        }
    //    });

    Vue.component('thakds', {
        functional: true,
        render: function (createElement, context) {
            var  decoratedGift = createElement(context.props.decoration, context.props.gift)
            return createElement('p', ['Dear John, thanks for ', decoratedGift])
        },
        props: {
            gift: String,
            decoration: String
        }
    })
</script>

</body>
</html>